<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Choose Dish in Meal</title>
<link href="css/mystyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<h3>Choose Dish In Meals</h3>
	<c:set var="menuId" value="${requestScope.MENUID}"></c:set>
	<c:set var="mealOrder" value="${requestScope.MEALORDER}"></c:set>
	<c:forEach var="dishDTO" items="${requestScope.DISHLIST}">
		<c:set var="checker" value="false"></c:set>
		<c:forEach var="selectedDish" items="${requestScope.SELECTEDDISHES}">
			<c:if test="${selectedDish.id == dishDTO.id}">
        		<c:set var="checker" value="true"></c:set>
    		</c:if>
		</c:forEach>
		<div id="dish-container-${dishDTO.id}" style="width:100px;">
			<c:if test="${checker eq 'true'}">
				<input type="checkbox" id="selectedDish-${dishDTO.id}" name="selectedDish" value="${dishDTO.id}" checked/>${dishDTO.name}<br/>
			</c:if>
			<c:if test="${checker eq 'false'}">
				<input type="checkbox" id="${dishDTO.id}" name="selectedDish" value="${dishDTO.id}"/>${dishDTO.name}<br/>
			</c:if>
		</div><br/>
		<div id="dish-info-${dishDTO.id}" class="dish-info-div">
			Dish Name: ${dishDTO.name} <br/>
			Calo: ${dishDTO.calo} <br/>
			Description: ${dishDTO.description} <br/>
			<img src="${dishDTO.imgPath}" width="100px" height="100px"/>
		</div>
		<script type="text/javascript">
			document.getElementById("dish-container-" + '${dishDTO.id}').onmouseover = function() {
				document.getElementById("dish-info-" + '${dishDTO.id}').style.display = 'block';
			};
			document.getElementById("dish-container-" + '${dishDTO.id}').onmouseout = function() {
				document.getElementById("dish-info-" + '${dishDTO.id}').style.display = 'none';
			};
		</script>
	</c:forEach>
	<input type="button" id="btnProcess" onclick="process_picking()" value="Save"/>
	<input type="button" onclick="top.close()" value="Return back"/>
	<span id="message"></span>
</body>
<script type="text/javascript">
function process_picking() {
	var selectedDish = document.getElementsByName('selectedDish');
	var selectedDish_str = '';
	for (var i = 0; i < selectedDish.length; i++) {
		if (selectedDish[i].checked) {
			selectedDish_str += selectedDish[i].value + ',';
		}
	}
	if (selectedDish_str != '') {
		selectedDish_str = selectedDish_str.substring(0, selectedDish_str.length - 1);
	}
	var xmlhttp;
	if (window.XMLHttpRequest) {
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	} else {
		// code for IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			if (xmlhttp.responseText == 'success') {
				document.getElementById("message").innerHTML = '<strong><font color="green">Success!</font></strong>';
			} else if (xmlhttp.responseText == 'fail') {
				document.getElementById("message").innerHTML = '<strong><font color="red">Failed!</font></strong>';
			}
		}
	};
	xmlhttp.open("POST", "PlanServlet", true);
	xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xmlhttp.send('action=edit-dish-in-meal&menuId='+ '${menuId}' + '&mealOrder=' + '${mealOrder}' + '&selectedDishes=' + selectedDish_str);
}

</script>
</html>